<template>
  <div class="flex flex-y-center flex-x-flex-end h-100">
    <el-tooltip trigger="hover" placement="bottom" content="复制首页地址">
      <div class="flex flex-center pointer mx-4" @click="copyHomeUrl">
        <AppIcons icon="LinkOutlined" :size="20" />
      </div>
    </el-tooltip>
    <el-tooltip trigger="hover" placement="bottom" content="打开首页">
      <div class="flex flex-center pointer mx-4" @click="openHome">
        <AppIcons icon="DesktopOutlined" :size="20" />
      </div>
    </el-tooltip>
    <el-tooltip trigger="hover" placement="bottom" content="我的邀请二维码">
      <div class="flex flex-center pointer mx-4" @click="getQrcode">
        <AppIcons icon="Connection" :size="20" />
      </div>
    </el-tooltip>
    <el-tooltip trigger="hover" placement="bottom" content="切换管理角色">
      <div class="flex flex-center pointer mx-4" @click="showSelectUse">
        <AppIcons icon="Switch" :size="20" />
      </div>
    </el-tooltip>
    <el-dialog v-model="dialogVisible" title="选择管理角色" width="500" @close="handleClose">
      <div class="block-item" v-if="$userApp.userInfo.mchs && $userApp.userInfo.mchs.length > 0">
        <div class="role-title mb-4">商户</div>
        <div v-for="(item, index) in $userApp.userInfo.mchs" :index="index" class="use-item flex"
          :class="{ 'active': form.role == 'mch' && form.id === item.id, 'lock-active': $userApp.userInfo.use_mch_id === item.id }"
          @click="selectedUse('mch', item.id)">
          <div class="flex-1">{{ item.title }}</div>
          <div v-if="$userApp.userInfo.use_mch_id === item.id">当前身份</div>
          <div v-else-if="form.role == 'mch' && form.id === item.id">当前选择</div>
        </div>
      </div>
      <div class="block-item" v-if="$userApp.userInfo.shops && $userApp.userInfo.shops.length > 0">
        <div class="role-title mb-4">门店</div>
        <div v-for="(item, index) in $userApp.userInfo.shops" :index="index" class="use-item flex"
          :class="{ 'active': form.role == 'shop' && form.id === item.id, 'lock-active': $userApp.userInfo.use_shop_id === item.id }"
          @click="selectedUse('shop', item.id)">
          <div class="flex-1">{{ item.title }}</div>
          <div v-if="$userApp.userInfo.use_shop_id === item.id">当前身份</div>
          <div v-else-if="form.role == 'shop' && form.id === item.id">当前选择</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmUse">
            确定切换
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="showQrcode" title="邀请技师入驻二维码" width="500">
      <div class="flex flex-column flex-center" v-if="qrcode.base64">
        <el-image class="mb-4" :src="qrcode.base64" />
        <div class="qrcode-url">{{ qrcode.url }}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      showQrcode: false,
      qrcode: {},
      form: {
        role: '',
        id: ''
      }
    };
  },
  created() {
    this.$nextTick(() => {
      if (!this.$userApp.userInfo.use_mch_id && !this.$userApp.userInfo.use_shop_id) {
        this.showSelectUse();
      }
    })
  },
  methods: {
    getHomeUrl() {
      if (!this.$siteApp.siteInfo.domain) {
        return "请先配置落地域名";
      }
      this.moudelName = globalThis.location.pathname.replace(/^\/(.*)\/$/, '$1');
      const appid = localStorage.getItem(this.moudelName + '_appid');
      if (!appid) {
        throw new Error("获取应用id失败");
      }
      return this.$siteApp.siteInfo.domain + '/app/ycMassage/#/?appid=' + appid;
    },
    copyHomeUrl() {
      try {
        const copyText = this.getHomeUrl();
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(copyText).then(_ => {
            this.$useMessage('已复制', 'success');
          })
        } else {
          let input = document.createElement('input');
          input.value = copyText;
          document.body.appendChild(input);
          input.select();
          document.execCommand('Copy');
          input.remove();
          this.$useMessage('已复制', 'success');
        }
      } catch (error) {
        return this.$useMessage(error.message, 'error');
      }
    },
    openHome() {
      try {
        const url = this.getHomeUrl();
        window.open(url);
      } catch (error) {
        return this.$useMessage(error.message, 'error');
      }
    },
    showSelectUse() {
      this.dialogVisible = true;
    },
    handleClose() {
      window.location.reload();
    },
    selectedUse(role, id) {
      this.form = {
        role,
        id
      };
    },
    confirmUse() {
      this.$http.usePost("app/ycMassage/shop/Publics/selectedUse", this.form).then(res => {
        this.dialogVisible = false;
      });
    },
    getQrcode() {
      this.$http.useGet("app/ycMassage/shop/User/qrcode").then(res => {
        this.qrcode = res.data;
        this.showQrcode = true;
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.h-100 {
  height: 100%;
}

.flex-y-center {
  align-items: center;
}

.flex-x-flex-end {
  justify-content: flex-end;
}

.flex-center {
  justify-content: center;
  align-items: center;
  height: 100%;
}

.pointer {
  cursor: pointer;
}

.ml-4,
.mx-4 {
  margin-left: 10px;
}

.mr-4,
.mx-4 {
  margin-right: 10px;
}

.mb-4 {
  margin-bottom: 20px;
}

.block-item {
  padding: 20px;
}

.role-title {
  color: var(--el-color-info);
  font-size: 12px;
}

.use-item {
  padding: 10px;
  background-color: var(--el-color-info-light-9);
  border-radius: 6px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.use-item:hover {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary-light-3);
}

.use-item.active {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.use-item.lock-active {
  background-color: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
.qrcode-url{
  background-color: var(--el-color-primary-light-9);
  border-color:var(--el-color-primary-light-8);
  color:var(--el-color-primary);
  word-break: break-all;
  padding:10px;
  border-radius:10px;
}
</style>